<script setup>
import { ref } from 'vue'
import { Button, Field, CountDown } from 'vant'

const form = ref({
  username: '',
  code: '',
  password: ''
})

const sendCode = () => {
  // 这里编写发送验证码逻辑
  console.log('发送验证码到：', form.username)
}
</script>

<template>
  <div class="register-container">
    <div class="back" @click="$router.back">← 返回</div>
    <h3 class="title">新用户注册</h3>
    <div class="form-wrap">
      <Field
        v-model="form.username"
        placeholder="请输入手机号"
        clearable
        left-icon="phone"
        type="number"
      />
      <Field
        v-model="form.code"
        placeholder="请输入验证码"
        clearable
        left-icon="message"
        right-icon>
        <template #right>
          <CountDown :time="60000" @finish="sendCode" @click="sendCode">
            发送验证码
          </CountDown>
        </template>
      </Field>
      <Field
        v-model="form.password"
        placeholder="设置登录密码（6-16位）"
        type="password"
        clearable
        left-icon="lock"
      />
      <Button type="primary" class="register-btn">立即注册</Button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.register-container {
  min-height: 100vh;
  padding: 0 1.5rem;
  background: white;

  .back {
    padding: 2rem 0;
    font-size: 1.2rem;
    color: #333;
  }

  .title {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 2rem;
  }

  .form-wrap {
    .register-btn {
      margin-top: 2rem;
      height: 2.8rem;
      font-size: 0.9rem;
    }
  }
}
</style>